<template>
  <div class="content-body">
    <el-row>
      <el-col :span="24">
        <div class="content-handle">
          <h2 class="title">Calculator Rules</h2>
          <div class="right">
            <el-button icon="setting">configVoContrast</el-button>
            <el-button icon="plus">addCalculatorRule</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4">
        <rules-list @dataChange="dataChange"></rules-list>
      </el-col>
      <el-col :span="20">
        <div class="list-content">
          <div class="head">
            <h3 v-show='title != ""'>
              {{title}}
              <el-switch
                v-model="ynFlag"
                on-color="#13ce66"
                off-color="#ff4949">
              </el-switch>  
            </h3>
          </div>
          <div class="body">
            <h3>Rule Swimlane</h3>
            <div>
              <ul class="wizard-steps m-b-10">
                <li class="complete"><span class="step"></span><span class="title">trigger</span></li>
                <li class="complete"><span class="step"></span><span class="title">takeData</span></li>
                <li class="complete"><span class="step"></span><span class="title">collCheck</span></li>
                <li class="complete"><span class="step"></span><span class="title">handleData</span></li>
                <li class="complete"><span class="step"></span><span class="title">ending</span></li>
              </ul>
              <div class="rule-lang-row clear-float">
                <div class="left-20">
                  <div class="fill"></div>
                  <div class="rule-container" v-for="item in expType0">
                    <blockquote>
                      <footer>{{item.textEn}}</footer>
                      <footer>{{item.textCn}}</footer>
                    </blockquote>
                  </div>
                </div>
                <div class="left-20">
                  <div class="fill"></div>
                  <div class="rule-container" v-for="item in expType10">
                    <blockquote>
                      <footer>{{item.textEn}}</footer>
                      <footer>{{item.textCn}}</footer>
                    </blockquote>
                  </div>
                </div>
                <div class="left-20">
                  <div class="fill"></div>
                  <div class="rule-container" v-for="item in expType20">
                    <blockquote>
                      <footer>{{item.textEn}}</footer>
                      <footer>{{item.textCn}}</footer>
                    </blockquote>
                  </div>
                </div>
                <div class="left-20">
                  <div class="fill"></div>
                  <div class="rule-container" v-for="item in expType30">
                    <blockquote>
                      <footer>{{item.textEn}}</footer>
                      <footer>{{item.textCn}}</footer>
                    </blockquote>
                  </div>
                </div>
                <div class="left-20">
                  <div class="fill"></div>
                  <div class="rule-container" v-for="item in expType40">
                    <blockquote>
                      <footer>{{item.textEn}}</footer>
                      <footer>{{item.textCn}}</footer>
                    </blockquote>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import RulesList from "../plugins/RulesList";
  export default {
    components: {RulesList},
    name: 'CalculatorRules',
    data() {
      return {
        ruleList: [],
        title:"",
        ynFlag:false
      }
    },
    methods: {
      "dataChange": function(value) {
        this.title = value.title;
        this.ruleList = value.dataList;
        this.ynFlag = value.ynFlag;
        return false;
      }
    },
    computed: {
        "expType0": function() {
            return this.ruleList.filter(function(item) {
                return "0" == item.expType;
            });
        },
        "expType10": function() {
          return this.ruleList.filter(function(item) {
            return "10" == item.expType;
          });
        },
        "expType20": function() {
          return this.ruleList.filter(function(item) {
            return "10" == item.expType;
          });
        },
        "expType30": function() {
          return this.ruleList.filter(function(item) {
            return "30" == item.expType;
          });
        },
      "expType40": function() {
        return this.ruleList.filter(function(item) {
          return "40" == item.expType;
        });
      }
    }
  }
</script>
